<template>
  <div class="button">
    <el-button @click="changeSelect('ing')" type="success">预约中</el-button>
    <el-button @click="changeSelect('ok')" type="warning">已完成</el-button>
    <el-button @click="changeSelect('notOk')" type="danger">未完成</el-button>
    <el-button @click="changeSelect('cancel')" type="info">已取消</el-button>
  </div>
  <el-table
      :data="this.ReservationInfo"
      style="width: 100%"
      stripe
      border
      highlight-current-row
      class="reservationList"
      :style="{ fontSize: '20px' }"
  >
    <el-table-column prop="projectName" label="项目名称" />
    <el-table-column prop="petName" label="宠物名称"/>
    <el-table-column prop="time" label="时间" />
    <el-table-column label="预约状态">
      <template v-slot="scope">
        {{ getStatusStr(scope.row.status) }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="scope" v-if="params.status === 'ing'">
        <el-button style="margin: 0 0" @click="openUpdateWindow(scope.row)" link type="warning" size="large">变更</el-button>
        <el-button style="margin: 0 0" @click="openDeleteWindow(scope.row.id)" link type="warning" size="large">取消</el-button>
      </template>
    </el-table-column>
  </el-table>



<!--变更预约-->
  <el-dialog
      v-model="this.updateVisible"
      title="请填写预约信息"
      width="400"
  >
    <el-date-picker
        v-model="this.params.update.time"
        placeholder="到店时间"
        format="YYYY/MM/DD"
        class="el-date-picker-time"
    />
    <el-select class="el-select-pet" v-model="this.params.update.petId" placeholder="携带的宠物">
      <el-option
          v-for="(pet, index) in this.petList"
          :label="pet.name"
          :value="pet.id"
          v-bind:key="index"
      >
      </el-option>
    </el-select>
    <div class="dialog-footer">
      <el-button style="margin-right: 20px" type="info" @click="updateVisible = false">取消</el-button>
      <el-button type="primary" @click="updateReservation">
        预约
      </el-button>
    </div>
  </el-dialog>

  <el-dialog
      v-model="this.cancelVisible"
      width="500"
  >
    <span style="font-size: 20px">确定取消预约吗?</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="this.cancelVisible = false">取消</el-button>
        <el-button type="danger" @click="deletePet">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios";
export default {
  name: "MyReservation",
  data(){
    return{
      ReservationInfo:[],
      petList:[],
      updateVisible:false,
      cancelVisible:false,
      time:'',
      selectPetId:'',
      params : {
        status : 'ing',
        update : {
          id : '',
          petId : '',
          time : '',
        },
        delete :{
          petId : '',
        }

      }

    }
  },
  mounted() {
    this.getUserReservationInfo();
    this.getPets();
  },
  methods:{
    getStatusStr(status){
      if (status === 1){
        return '店家未确认'
      }if (status === 2){
        return '店家已确认'
      }if (status === 3){
        return '已取消'
      }if (status === 4){
        return '店家取消'
      }if (status === 5){
        return '已完成'
      }if (status === 6){
        return '未完成'
      }

    },
    openDeleteWindow(petId){
      this.cancelVisible = true;
      this.params.delete.petId = petId;
      console.log(petId)
    },
    deletePet(){
      axios.get("http://localhost:8088/reservation/cancel/"+this.params.delete.petId,{withCredentials:true})
          .then(res => {
            console.log(res);
            this.getUserReservationInfo();
            this.cancelVisible = false;
          })
    },
    getUserReservationInfo(){
      axios.get("http://localhost:8088/get/reservation/"+this.params.status,{withCredentials:true})
          .then(res => {

            this.ReservationInfo = res.data.data;
            this.ReservationInfo.forEach(item => {
              // 将时间字符串转换为Date对象
              const date = new Date(item.time);
              // 获取年月日
              const year = date.getFullYear();
              const month = date.getMonth() + 1; // 月份是从0开始的，所以要加1
              const day = date.getDate();
              // 更新时间数据
              item.time = `${year}年 ${month}月 ${day}日`;
            });
          })
    },

    openUpdateWindow(reservation){
      this.updateVisible = true,
      this.params.update.id = reservation.id;
      console.log('id:   '+this.params.update.id)
    },

    updateReservation(){
      axios.post("http://localhost:8088/reservation/update",this.params.update,{withCredentials:true})
          .then(res => {
            console.log(res);
            this.getUserReservationInfo();
            this.updateVisible = false;
          })
    },
    getPets(){
      axios.get("http://localhost:8088/get/pet",{withCredentials:true})
          .then(res => {
            this.petList = res.data.data
          })
    },

    changeSelect(status){
      this.params.status = status;
      this.getUserReservationInfo();
    }
  }
}
</script>

<style scoped>
.el-date-picker-time{
  --el-date-editor-width: 300px;
  margin: 0 auto 30px;
}
.el-select-pet{
  --el-select-width: 220px;
  margin: 20px auto;
}
.reservationList .el-table__row {
  height: 70px;
}


.button {
  padding-bottom: 20px;
}
</style>